<template>
	<view>
		<u-navbar :is-back="false" title="" :background="{backgroundColor: '#1296db'}">
			<view class="slot-wrap">

				<image src="../../static/icon/home/home_iocn_mine.png" style="width: 40rpx;height: 40rpx;"
					class="u-m-l-30 u-m-r-30" mode="aspectFill"></image>

				<view class="input-view u-flex">
					<uni-icons class="input-uni-icon u-m-l-10 u-m-r-5" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索"
						@confirm="confirm" />
				</view>

				<image src="../../static/icon/home/home_icon_add.png" style="width: 50rpx;height: 50rpx;"
					class="u-m-l-30 u-m-r-30" mode="aspectFill"></image>

			</view>
		</u-navbar>
		
		<view class="wrap">

			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#007AFF" ref="tabs" :list="tabList" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				
				<swiper-item v-for="(item,index) in tabList"  :key="index">
					
					<homeRecommend style="height: 100%;width: 100%;">
						
					</homeRecommend>
					
				</swiper-item>
				
			</swiper>
		</view>
	</view>
</template>

<script>
	
	import homeRecommend from './pages/recommend/home-recommend.vue'
	import testjs from'../../common/test.js'
	
	export default {
		components: {
			homeRecommend
		},
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[]
				],
				tabList: [{
						name: '推荐',
					},/*
					{
						name: '合集'
					},
					{
						name: '反炸宣传'
					},
					{
						name: '亲子',
					},
					{
						name: '游玩',
					},
					{
						name: '美食',
					},
					{
						name: '女生',
					},
					{
						name: '热门',
					},
					{
						name: '乐房网看房记',
					},
					{
						name: '法律',
					},
					{
						name: '乡镇',
					},
					{
						name: '关注',
					}*/
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
			};
		},
		onLoad() {
			
		},
		computed: {

		},
		methods: {
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.u-navbar {
		background-color: #007AFF;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
	}

	.input-view {
		background-color: #fff;
		width: 100%;
		border-radius: 88rpx;
		height: 60rpx;
	}



	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
